<template>
    <div>
        <router-view></router-view> 
  <div class="Recommend" v-if='img_list && img_list.length'>
        <swiper :options="swiperOption" ref="mySwiper" >
           <swiper-slide class="swiper_img" v-for="item of img_list" :key="item.id">
               <img :src="item.imgurl" alt="">
            </swiper-slide>
           <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
    <router-link to='about'>
<div class="migu_user"></div>
  </router-link>

 <div class='index_search'>
    <input type="text" class="s_inp">
    <p>
        <img src="@/assets/imgs/icon_search.png" alt="">
        <span>搜索</span>
    </p>
</div>


<div class="music_class">
    <ul>
        <li><router-link to="/musicList">
            <p><img src="@/assets/imgs/icon5.png" alt=""></p>
            <span>歌手</span></router-link>
        </li>
        <li>
            <router-link to="/onsite">
            <p><img src="@/assets/imgs/icon1.png" alt=""></p>
            <span>现场</span>
            </router-link>
        </li>
        <li>
              <router-link to="/ranklist">
            <p><img src="@/assets/imgs/icon2.png" alt=""></p>
            <span>榜单</span>
               </router-link>
        </li>
        <li>
             <router-link to="/special">
            <p><img src="@/assets/imgs/icon4.png" alt=""></p>
            <span>数字专辑</span>
             </router-link>
        </li>
        <li>
            <router-link to="/coloring">
            <p><img src="@/assets/imgs/icon3.png" alt=""></p>
            <span>彩铃</span>
               </router-link>
        </li>
    </ul>
</div>


<div class="list_title">
    <a href="">
        <span>推荐歌单</span>
        <img src="@/assets/imgs/icon_arrow.png" alt="">
    </a>
</div>


<div class="song_list">
    <ul>
        <li v-for="song of song_list" :key='song.id'>
       <a href="">
               <p><img :src="song.imgurl" alt=""></p>
               <span>{{song.text}}</span>
         </a>
        </li>
   
    </ul>
</div> 
<div class="addmess">
                   <img src="@/assets/imgs/love2.jpg" alt="">
              </div>  


    </div>
</template>


<script>

    export default {
    name:"Recommendimg",
    data:function(){
        return {
            swiperOption:{
              pagination:'.swiper-pagination',
              autoplay:3000,
              loop:true,
              autoplayDisableOnInteraction: false,
              stopOnLastSlide: false,
           },
           img_list:[
             {id:'001',imgurl:require('@/assets/imgs/banner1.jpg')},
             {id:'002',imgurl:require('@/assets/imgs/banner2.jpg')},
             {id:'003',imgurl:require('@/assets/imgs/banner3.jpg')},
             {id:'004',imgurl:require('@/assets/imgs/banner4.jpg')},
             {id:'005',imgurl:require('@/assets/imgs/banner5.jpg')},
             {id:'006',imgurl:require('@/assets/imgs/banner6.jpg')},
             {id:'007',imgurl:require('@/assets/imgs/banner7.jpg')},
             {id:'008',imgurl:require('@/assets/imgs/choice2.jpg')}
           ],
           song_list:[
               {id:'1001',imgurl:"http://mcontent.10086.cn/web/moive/link/20190716/23861531_GBW5J6.jpg",text:'[影视最强档]温暖治愈,诠释不完美青春'},
               {id:'1002',imgurl:"http://mcontent.10086.cn/web/moive/link/20190718/24397091_q17IUj.jpg",text:'如果思念有声音，恐怕你早已震耳欲聋'},
               {id:'1003',imgurl:"http://mcontent.10086.cn/web/moive/link/20190712/23981169_uzWsUC.jpg",text:'愿你爱一人，始于理解，终于灵魂'},
               {id:'1004',imgurl:"http://mcontent.10086.cn/web/moive/link/20190717/23981212_hZJmpM.jpg",text:'城市的风很大，我在努力的活着'},
               {id:'1005',imgurl:"http://mcontent.10086.cn/web/moive/link/20190715/23979990_l9sI7t.jpg",text:'那些有灵魂的乐队，点燃了我们的青春'},
               {id:'1006',imgurl:"http://d.musicapp.migu.cn/ugcdata/playListimg/51f50056-ecee-47f1-9cc9-3dcd9b457919.jpg",text:'追逐影子的人，自己就是影子'} 
           ]
        }
    }

}
</script>
<style scoped lang='scss' src='./Home.scss'>

</style>